<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PWA Website: our work and projects</title>

<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/css/styles.css">

<link rel="manifest" href="/manifest.json">

<meta name="theme-color" content="#ace">
<link rel="icon" sizes="192x192" href="/images/logo/logo192.png">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon-precomposed" sizes="192x192" href="/images/logo/logo192.png">
<link rel="apple-touch-icon-precomposed" sizes="180x180" href="/images/logo/logo180.png">
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="/images/logo/logo152.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="/images/logo/logo072.png">
<link rel="shortcut icon" href="/images/logo/logo016.png">
<link rel="shortcut icon" href="/favicon.ico">

<meta name="application-name" content="PWA Website">
<meta name="description" content="This is a demonstration website which uses Progressive Web App technologies to provide offline functionality.">
<meta name="keywords" content="website, pwa, offline">
<meta name="author" content="Craig Buckler">
<meta name="robots" content="noindex, nofollow">

</head>
<body>

<!-- header -->
<header>

  <!-- logo -->
  <a href="/" class="logo"><img src="/images/logo/logo152.png" alt="PWA"></a>

</header>

<!-- content -->
<main>
<article>

  <figure data-href="/images/hero/workspace-lo.jpg" data-srcset="/images/hero/workspace-lo.jpg 600w, /images/hero/workspace-hi.jpg 1200w" class="primary progressive replace">
    <img src="/images/hero/workspace-pv.jpg" class="preview" alt="workspace" />
  </figure>

  <h1>Make Your Project Our Project</h1>

  <p>This is an example website. This page would normally list successful projects with annoying pictures of us high-fiving happy clients. Except it won't be us or anyone we know. It'll be business clip-art images of unrealistically attractive models who have evidently never opened a spreadsheet or code editor in their entire glamorous lives.</p>

  <figure class="boxout2">
    <a href="/images/circuit.jpg" class="progressive replace">
      <img src="/images/circuit-pv.jpg" class="preview" alt="circuit" />
    </a>
    <figcaption>A meaningless image and jargon-laden statement to illustrate we understand technology.</figcaption>
  </figure>

  <h2>PWA success</h2>

  <p>Apologies for the cynical nature of these pages. I had to write something. It actually took longer than the whole process of adapting the site into a Progressive Web App.</p>

  <h2>Fewer details</h2>

  <p>Again, there's nothing more to see here. Do you have an urge for some Latin gibberish? You got it!&hellip;</p>


  <p>Morbi sit amet lorem maximus, dictum magna in, porta nisi. Proin nec fermentum nisl. Proin vel volutpat nisl, non condimentum tellus. Pellentesque tristique lacinia erat eu mollis. Integer tincidunt elit sit amet odio faucibus sagittis.</p>

  <figure class="boxout1">
    <a href="/images/bluescreen.jpg" class="progressive replace">
      <img src="/images/bluescreen-pv.jpg" class="preview" alt="BSOD" />
    </a>
    <figcaption>A random image of a monitor which appears to show something technical. Oh dear &ndash; it's a BSOD &ndash; but our design experts decided it was on-trend or something.</figcaption>
  </figure>

  <p>Quisque euismod, ex sit amet rutrum vestibulum, libero neque porttitor ipsum, at hendrerit risus quam non dui. Maecenas gravida congue mauris sit amet mattis. Nullam gravida nunc in consectetur venenatis. Vestibulum tincidunt a eros at dictum. Donec ultricies varius leo, a finibus augue tincidunt quis. Ut nec sagittis diam, vitae egestas sapien. Fusce a aliquet massa.</p>

  <p>Vestibulum id fermentum urna. Praesent efficitur faucibus turpis, quis aliquet magna ullamcorper in. Nullam consequat imperdiet quam id aliquet.</p>

</article>
</main>

<!-- footer -->
<footer>
  <p>&copy;NOW</p>
  <p>All rights reserved.</p>
  <p>We don't track you or do anything nasty. Or so we say.</p>
  <p>Nothing to see here. Please move along.</p>
</footer>

<!-- menu link -->
<div id="menu"><a href="#nav">menu</a></div>

<!-- navigation -->
<nav id="nav">
  <ul>
    <li><a href="#menu" title="close menu" class="close">&#x2715;</a></li>
    <li><a href="/" class="nav">home</a></li>
    <li><a href="/work/" class="active nav">work</a></li>
    <li><a href="/about/" class="nav">about</a></li>
    <li><a href="/contact/" class="nav">contact</a></li>
  </ul>
</nav>

<script src="/js/main.js" defer></script>
</body>
</html>
